<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电梯管理系统</title>
<!--    <link href="https://cdn.tailwindcss.com" rel="stylesheet">-->
<!--    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>-->
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">
    <script src="{{ url_for('static', filename='js/chart.umd.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/elevator.css') }}">
</head>
<body>
    <header>
        <div class="container">
            <h1>
                <i class="fa fa-building-o mr-3"></i>电梯管理系统
            </h1>
            <p>实时监控与控制电梯运行状态</p>
        </div>
    </header>

    <main class="container">
        <!-- 系统状态概览 -->
        <section>
            <div class="card">
                <h2>
                    <i class="fa fa-dashboard"></i>系统状态概览
                </h2>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-info">
                            <p>运行中电梯</p>
                            <h3 id="active-elevators">0</h3>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-elevator"></i>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-info">
                            <p>空闲电梯</p>
                            <h3 id="idle-elevators">0</h3>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-pause"></i>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-info">
                            <p>等待请求</p>
                            <h3 id="pending-requests">0</h3>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-clock-o"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 电梯可视化与控制 -->
        <section>
            <div class="card">
                <h2>
                    <i class="fa fa-eye"></i>电梯实时监控
                </h2>

                <div class="elevator-monitor">
                    <div class="elevator-detail-card" id="elevator-1-details">
                        <h3>电梯 #1</h3>
                        <div class="space-y-2 text-sm">
                            <p class="detail-item"><span>当前楼层:</span> <span id="elevator-1-floor">1</span></p>
                            <p class="detail-item"><span>状态:</span> <span id="elevator-1-status-detailed">空闲</span></p>
                            <p class="detail-item"><span>方向:</span> <span id="elevator-1-direction">无</span></p>
                            <p class="detail-item"><span>乘客数量:</span> <span id="elevator-1-passengers">0</span>/8</p>
                            <p class="detail-item"><span>目标楼层:</span> <span id="elevator-1-targets">无</span></p>
                            <p class="detail-item"><span>最后活动:</span> <span id="elevator-1-activity">-</span></p>
                        </div>

                        <div class="target-floor-control">
                            <label>指定目标楼层</label>
                            <div class="control-group">
                                <select id="elevator-1-target-select">
                                    <option value="1">1楼</option>
                                    <option value="2">2楼</option>
                                    <option value="3">3楼</option>
                                </select>
                                <button onclick="setElevatorTarget(1)">
                                    发送
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- 电梯井道可视化 -->
                    <div>
                        <div class="elevators-container">
                            <!-- 电梯1 -->
                            <div class="elevator-group" id="elevator-1-container">
                                <h3>电梯 #1</h3>
                                <div class="elevator-shaft relative">
                                    <!-- 楼层指示器 -->
                                    <div class="floor-indicator" style="bottom: 10px;">1</div>
                                    <div class="floor-indicator" style="bottom: 70px;">2</div>
                                    <div class="floor-indicator" style="bottom: 130px;">3</div>

                                    <!-- 电梯轿厢 -->
                                    <div class="elevator-car bg-primary" id="elevator-1">
                                        1
                                    </div>
                                </div>
                                <div class="elevator-status" id="elevator-1-status">
                                    状态: 空闲
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 楼层请求面板 -->
                    <div>
                        <div class="floor-request-panel">
                            <h3>楼层请求</h3>
                            <!-- 楼层按钮从3到1排列 -->
                            <div class="floor-buttons">

                                <!-- 3楼 -->
                                <div class="floor-row">
                                    <span>3楼</span>
                                    <div class="flex space-x-2">
                                        <div class="request-btn" onclick="requestElevator(3, 'down')">
                                            <i class="fa fa-arrow-down"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- 2楼 -->
                                <div class="floor-row">
                                    <span>2楼</span>
                                    <div class="flex space-x-2">
                                        <div class="request-btn" onclick="requestElevator(2, 'up')">
                                            <i class="fa fa-arrow-up"></i>
                                        </div>
                                        <div class="request-btn" onclick="requestElevator(2, 'down')">
                                            <i class="fa fa-arrow-down"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- 1楼 -->
                                <div class="floor-row">
                                    <span>1楼</span>
                                    <div class="flex space-x-2">
                                        <div class="request-btn" onclick="requestElevator(1, 'up')">
                                            <i class="fa fa-arrow-up"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 统计信息 -->
        <section>
            <div class="card">
                <h2>
                    <i class="fa fa-bar-chart"></i>运行统计
                </h2>

                <div class="stats-charts">
                    <div class="chart-container">
                        <h3>电梯使用频率</h3>
                        <canvas id="usage-chart"></canvas>
                    </div>
                    <div class="chart-container">
                        <h3>楼层请求分布</h3>
                        <canvas id="floor-request-chart"></canvas>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>电梯管理系统 reinovo 2025</p>
            <p>基于Flask框架开发</p>
        </div>
    </footer>
    <script src="{{ url_for('static',filename='js/elevator.js') }}"></script>
</body>
</html>
